<template>
  <div class="broadcast-main">
    <div class="broadcast-header">
      <div class="custom-tabs">
        <div :class="['tab-item', actived === 0 && 'active']">高级群发</div>
        <div :class="['tab-item', actived === 1 && 'active']" @click="onNavigationTo('/single/cyclic-list')">管理循环任务</div>
      </div>
    </div>
    <div class="broadcast-container">
      <div class="broadcast-head">
        <el-radio-group v-model="dateType" size="small">
          <el-radio-button :label="1">近2周记录</el-radio-button>
          <el-radio-button :label="2">2周前记录</el-radio-button>
        </el-radio-group>
        <div class="search-filter">
          <el-dropdown v-if="dateType === 1">
            <el-button v-hasPermi="['single:broadcast:addtask']" type="primary" plain size="small">
              <i class="el-icon-plus el-icon--left"></i>新建任务
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="onNavigationTo('/single/market/add')">群发消息</el-dropdown-item>
              <el-dropdown-item @click.native="onNavigationTo('/single/market/add')">群发公告</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button v-hasPermi="['single:broadcast:set']" type="primary" plain size="small" class="icon-button" v-if="dateType === 1" @click="showEditSendSettings = true">
            <i class="el-icon-setting"></i>
          </el-button>
          <el-select v-model="form.value" placeholder="全部分组" size="small" >
            <el-option-group
              v-for="group in options"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
          <el-select v-model="form.account" placeholder="全部" size="small" >
            <el-option
              v-for="item in accountList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="form.type" placeholder="全部类型" size="small" >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="form.task" placeholder="任务状态" size="small" >
            <el-option
              v-for="item in taskList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input class="search-input" size="small" placeholder="搜任务" suffix-icon="el-icon-search" />
          <el-date-picker
            size="small"
            v-model="form.dateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="content-wrap">
        <div class="left">
          <div class="list-wrap" v-if="dateType === 1">
            <div class="task-list">
              <div class="task-item" v-for="i in 4" :key="index">
                <div class="task-bd">
                  <div class="info">
                    <div class="task-icon">
                      <img class="status-img" src="https://s.yezgea02.com/1667962072183/zanting.png" />
                    </div>
                    <div class="info-text">
                      <div class="title">22222222</div>
                      <span>已选：1好友 1群聊</span>
                      <span>发送：1文本</span>
                    </div>
                  </div>
                  <div class="actions">
                    <div class="space-flex">
                      <span style="color: rgba(0, 0, 0, 0.45);">已取消</span>
                      <el-dropdown>
                        <i class="el-icon-more more-icon"></i>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-hasPermi="['single:broadcast:copy']">复制（全部对象）</el-dropdown-item>
                          <el-dropdown-item v-hasPermi="['single:broadcast:copy']">复制（仅未发送对象）</el-dropdown-item>
                          <el-dropdown-item v-hasPermi="['single:broadcast:copy']">复制（仅内容）</el-dropdown-item>
                          <el-dropdown-item v-hasPermi="['single:broadcast:editgroup']">修改分组</el-dropdown-item>
                          <el-dropdown-item v-hasPermi="['single:broadcast:delete']">删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </div>
                <div class="footer">
                  <div class="account-info">ID:18691191<span style="margin-left: 4px;">主账号创建</span></div>
                  <div class="time">2024-03-21 11:27</div>
                </div>
              </div>
            </div>
          </div>
          <div class="empty-content" v-else>
            <img class="empty-cover" src="@/assets/images/market_empty.png" />
            <p>暂无任务，请创建</p>
          </div>
        </div>
        <div class="right">
          <div class="wrap" v-if="dateType === 1">
            <div class="task-info">
              <div class="title">22222222222</div>
              <div class="task-info-tags">
                <div class="task-item">单次定时群发消息任务</div>
                <div class="task-item" style="background-color: rgba(0, 0, 0, 0.25);color: #fff;">已取消</div>
              </div>
            </div>
            <div class="card-info-list">
              <div class="list-item" v-for="item in infoList" :key="item.id">
                <div class="label">{{ item.label }}</div>
                <div :class="['value', item.onfunc && 'color-blue']" v-if="item.onfunc" @click.prevent="item.onfunc">{{ item.value }}</div>
                <div :class="['value', item.onfunc && 'color-blue']" v-else>{{ item.value }}</div>
              </div>
            </div>
            <div class="tab-bar">
              <el-button v-if="tabsValue === '1'" v-hasPermi="['single:broadcast:export']" class="absolute-export-btn" small="size" type="primary" plain>数据导出</el-button>
              <el-tabs v-model="tabsValue" type="card">
                <el-tab-pane label="群发内容" name="0">
                  <div class="tab-msg">
                    <div class="chat-list">
                      <div class="chat-item">
                        <div class="serial-number">1</div>
                        <div class="chat-text">222222</div>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="下发企微号" name="1">
                  <div class="tips">
                    <el-alert
                      type="warning"
                      show-icon>
                      <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);">
                        具体发送进度详情可点击下面列表中的【查看】至各个企微号下对应任务中查看。
                      </div>
                    </el-alert>
                  </div>
                  <div class="tabs-card">
                    <div class="card-item">
                      <div class="title">
                        总对象数
                        <el-tooltip class="item" effect="dark" placement="top">
                          <div slot="content">根据设置符合条件的所有对象总数。</div>
                          <svg-icon icon-class="iquestion"/>
                        </el-tooltip>
                      </div>
                      <div class="count">2</div>
                    </div>
                    <div class="card-item">
                      <div class="title">
                        流失好友过滤
                        <el-tooltip class="item" effect="dark" placement="top">
                          <div slot="content">任务开始时，直接过滤的对象数，不<br/>进入发送队列。如果创建任务流失和<br/>拉黑好友选择发送时，流失和拉黑好<br/>友不会统计此处。</div>
                          <svg-icon icon-class="iquestion"/>
                        </el-tooltip>
                      </div>
                      <div class="count">0</div>
                    </div>
                    <div class="card-item">
                      <div class="title">
                        执行完成
                        <el-tooltip class="item" effect="dark" placement="top">
                          <div slot="content">系统已经执行完成发送的对象数。</div>
                          <svg-icon icon-class="iquestion"/>
                        </el-tooltip>
                      </div>
                      <div class="count">2</div>
                    </div>
                    <div class="card-item">
                      <div class="title">
                        发送失败
                        <el-tooltip class="item" effect="dark" placement="top">
                          <div slot="content">执行发送后，系统有检测到离线、拉<br/>黑或者流失添加好友等系统消息时，<br/>判定为发送失败</div>
                          <svg-icon icon-class="iquestion"/>
                        </el-tooltip>
                      </div>
                      <div class="count">2</div>
                    </div>
                    <div class="card-item">
                      <div class="title">
                        执行完成（未失败）
                        <el-tooltip class="item" effect="dark" placement="top">
                          <div slot="content">由于系统无法检测实际发送是否成<br/>功，未收到离线、拉黑或者流失添加<br/>好友等系统消息时，默认都是发送完<br/>成。执行完成（未失败）=执行完成<br/>-发送失败。</div>
                          <svg-icon icon-class="iquestion"/>
                        </el-tooltip>
                      </div>
                      <div class="count">2</div>
                    </div>
                  </div>
                  <el-table
                      :data="tableData"
                      style="width: 100%">
                      <el-table-column
                        prop="date"
                        label="企微号"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="群发对象"
                      >
                      </el-table-column>
                      <el-table-column label="发送进度">
                        <el-table-column
                          prop="name"
                          label="流失好友过滤"
                          width="120">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="执行完成"
                          width="120">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="发送失败"
                          width="120">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="发送状态"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="操作"
                      >
                      </el-table-column>
                      <template slot="empty">
                        <TableEmpty />
                      </template>
                    </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
            <div class="empty-content">
              <img class="empty-cover" src="@/assets/images/peiyNU.png" />
            </div>
          </div>
        </div>
      </div>
      <SendSettingDialog :visableIf.sync="showEditSendSettings" />
      <AutoExceptionsDialog :visible="autoExceptionVisible" @handCloseDialog="onHandCloseAutoExceptionDialog" />
      <SendRequireDialog :visible="sendRequireVisible" @handCloseDialog="onHandClosesendRequireDialog" />
  </div>
</template>
<script>
import SendSettingDialog from '../components/sendSettingDialog'
import AutoExceptionsDialog from '../components/autoExceptionsDialog'
import SendRequireDialog from '../components/SendRequireDialog'

export default {
  data() {
    return {
      actived: 0,
      dateType: 1,
      form: {
        value: '',
        account: '',
        type: '',
        task: '',
        dateTime: ''
      },
      options: [{
          options: [{
            value: 'Shanghai',
            label: '默认分组'
          }]
        }, {
          options: [{
            value: 'Chengdu',
            label: '分组管理'
          }]
        }],
        accountList: [
          { value: '', label: '全部' },
          { value: '1', label: '主账号' },
          { value: '2', label: '员工1' },
          { value: '3', label: '员工2' },
        ],
        typeList: [
          { value: '0', label: '即时群发消息' },
          { value: '1', label: '即时群发公告' },
          { value: '2', label: '单次定时群发消息' },
          { value: '3', label: '单次定时群发公告' },
          { value: '4', label: '每日循环消息' },
          { value: '5', label: '每日循环公告' },
          { value: '6', label: '每周循环公告' },
        ],
        taskList: [
          { value: '', label: '全部' },
          { value: '1', label: '创建中' },
          { value: '2', label: '等待中' },
          { value: '3', label: '发送中' },
          { value: '4', label: '已完成' },
          { value: '5', label: '暂停中' },
          { value: '6', label: '已取消' },
        ],
        infoList: [
          {id: 1, label: '创建人：', value: '主账号'},
          {id: 2, label: '创建时间：', value: '2024-02-26 11:27'},
          {id: 3, label: '开始时间：', value: '2024-03-21 11:27'},
          {id: 4, label: '结束时间：', value: '2024-02-27 13:41'},
          {id: 5, label: '群发对象条件：', value: '查看', onfunc: () => { this.sendRequireVisible = true}},
          {id: 6, label: '单向好友：', value: '不发送'},
          {id: 7, label: '分组：', value: '不分组'},
          {id: 8, label: '异常自动处理：', value: '查看',onfunc: () => { this.autoExceptionVisible = true }}
        ],
        tabsValue: '1',
        tableData: [],
        showEditSendSettings: false,
        autoExceptionVisible: false,
        sendRequireVisible: false
    }
  },
  components: {
    SendSettingDialog,
    AutoExceptionsDialog,
    SendRequireDialog
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path)
    },
    onHandCloseAutoExceptionDialog() {
      this.autoExceptionVisible = false
    },
    onHandClosesendRequireDialog () {
      this.sendRequireVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.broadcast-main {
  .broadcast-header {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    .custom-tabs {
      display: flex;
      align-items: center;
      height: 100%;
      .tab-item {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: rgba(0,0,0,.65);
        cursor: pointer;
        &:hover {
          color: #5993ff;
        }
        &.active {
          color: #3070ff;
          text-shadow: 0 0 .25px currentColor;
          &::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            width: 100%;
            height: 2px;
            background: #3070ff;
          }
        }
        &:not(:first-child) {
          margin-left: 32px;
        }
      }
    }
  }
  .broadcast-container {
    padding: 16px;
    height: calc(100vh - 48px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    .broadcast-head {
      background-color: #fff;
      border-bottom: 1px solid #f0f0f0;
      padding: 12px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      .search-filter {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 110px 31px 160px 120px 120px 120px 164px 337px;
        column-gap: 8px;
        .icon-button {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .content-wrap {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-grow: 1;
      height: calc(100% - 46px);
      overflow: hidden;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      .left {
        width: 390px;
        height: 100%;
        background: #f3f3f3;
        border-right: 1px solid #e9e9e9;
        position: relative;
        &::before {
          position: absolute;
          left: 0;
          top: 0;
          content: "";
          width: 6px;
          height: 100%;
          background-color: #fff;
        }
        .list-wrap {
          height: 100%;
          overflow: auto;
          padding-left: 12px;
          padding-top: 12px;
          padding-bottom: 20px;
          .task-list {
            box-sizing: border-box;
            width: 364px;
            .task-item {
              width: 100%;
              padding: 12px;
              margin-bottom: 8px;
              background: #fff;
              border-radius: 4px;
              border: 1px solid #fff;
              cursor: pointer;
              .task-bd {
                width: 100%;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                .info {
                  flex: 1 1;
                  display: flex;
                  justify-content: flex-start;
                  align-items: flex-start;
                  .task-icon {
                    position: relative;
                    width: 48px;
                    height: 48px;
                    margin-right: 12px;
                    border-radius: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .status-img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .info-text {
                    flex: 1 1;
                    overflow: hidden;
                    .title {
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      font-weight: 700;
                      color: #000;
                      max-width: 180px;
                      font-size: 14px;
                    }
                    span {
                      display: block;
                      max-width: 200px;
                      font-size: 12px;
                      color: rgba(0, 0, 0, .45);
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                  }
                }
                .actions {
                  .space-flex {
                    display: flex;
                    align-content: center;
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.45);
                    gap: 5px;
                    .more-icon {
                      font-size: 10px;
                    }
                  }
                }
              }
              .footer {
                position: relative;
                margin-top: 12px;
                padding: 4px 0;
                font-size: 12px;
                font-weight: 400;
                color: rgba(0, 0, 0, .45);
                line-height: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .account-info {
                  border: 1px solid #f0f0f0;
                  border-radius: 4px;
                  color: rgba(0, 0, 0, .85);
                  padding: 4px 10px;
                  font-size: 12px;
                  font-weight: 400;
                  line-height: 20px;
                }
                .time {
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(0, 0, 0, .45);
                  line-height: 20px;
                }
              }
            }
          }
        }
        .empty-content {
          height: calc(100vh - 250px);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .empty-cover {
            width: 48px;
            height: 48px;
          }
          p {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, .25);
          }
        }
      }
      .right {
        flex: 1 1;
        background: #fff;
        align-self: stretch;
        overflow-y: hidden;
        position: relative;
        height: 100%;
        padding: 20px 20px 50px;
        .task-info {
          height: 100%;
          overflow-y: auto;
          .title {
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: 600;
            color: rgba(0, 0, 0, .85);
          }
          .task-info-tags {
            display: flex;
            align-items: center;
            .task-item {
              color: rgba(0, 0, 0, .85);
              background-color: #e0eaff;
              border: 1px solid #a2beff;
              padding: 2px 7px;
              font-size: 12px;
              line-height: 24px;
              border-radius: 4px;
              &:not(:first-child) {
                margin-left: 8px;
                border: 1px solid #e9e9e9;
              }
            }
          }
        }
        .card-info-list {
          display: grid;
          background-color: #f5f5f5;
          border-radius: 4px;
          margin: 12px 0 20px;
          column-gap: 8px;
          grid-template-columns: 150px 150px 150px 150px 150px 150px 150px;
          .list-item {
            padding: 16px;
            .label {
              color: rgba(0, 0, 0, .45);
              font-size: 12px;
              line-height: 22px;
            }
            .value {
              color: rgba(0, 0, 0, .85);
              font-size: 14px;
              line-height: 22px;
              &.color-blue {
                color: #3070ff;
                cursor: pointer;
              }
            }
          }
        }
        .tab-bar {
          position: relative;
          .tab-msg {
            background: #f3f3f3;
            border: 1px solid #e9e9e9;
            padding: 20px 0;
            .chat-list {
              .chat-item {
                display: flex;
                align-items: center;
                min-height: 60px;
                padding: 10px;
                .serial-number {
                  margin-left: 20px;
                  width: 20px;
                  height: 20px;
                  line-height: 20px;
                  font-size: 12px;
                  background: #ddd;
                  border-radius: 50%;
                  display: inline-block;
                  text-align: center;
                }
                .chat-text {
                  margin-left: 12px;
                  padding: 6px 12px;
                  font-size: 15px;
                  color: #000;
                  background: #fff;
                  border: 1px solid #e9e9e9;
                  border-radius: 5px;
                }
              }
            }
          }
          .absolute-export-btn {
            position: absolute;
            top: 0;
            right: 0px;
          }
          .tips {
            margin-bottom: 20px;
          }
          .tabs-card {
            padding: 12px;
            margin-bottom: 12px;
            background: rgb(245, 245, 245);
            display: flex;
            .card-item {
              color: rgba(0, 0, 0, .65);
              font-size: 14px;
              line-height: 22px;
              background: #fff;
              border-radius: 4px;
              padding: 8px 24px;
              margin:  0 8px;
              .title {
                color: rgba(0, 0, 0, .45);
                margin-bottom: 4px;
                font-size: 14px;
                line-height: 22px;
                i {
                  margin-left: 8px;
                  font-size: 16px;
                }
              }
              .count {
                margin-top: 4px;
                margin-bottom: 10px;
                font-size: 24px;
                font-weight: 600;
                color: rgba(0, 0, 0, .85);
                width: 150px;
              }
            }
          }
        }
        .empty-content {
          margin: 150px 8px;
          font-size: 14px;
          line-height: 1.5715;
          text-align: center;
          .empty-cover {
            width: 100px;
            height: 100px;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
  ::v-deep .el-table--border th.el-table__cell,
  ::v-deep .el-table td.el-table__cell {
    border-bottom: none !important;
  }
  ::v-deep .el-table--border .el-table__cell {
    border-right:none !important;
  }
  ::v-deep .el-table--group, .el-table--border{
    border: none !important;
  }
}
</style>